    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>约私教</title>
        <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" src="js/vue.js"></script>
        <script type="text/javascript" src="js/jquery.cookie.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
        <link rel="stylesheet" href="css/bootstrap.css">
    </head>
    <body>
    <div id="outter" style="width: 100%;height: 100%">
        教练详情
        <table  v-if="coachinfo!=null" class="table text-center table-bordered table-hover table-striped bg-info">
        <thead>
        <tr>
            <td >真实姓名</td>
            <td >电话</td>
            <td >交易次数</td>
            <td >成交次数</td>
            <td >未完成几次</td>
            <td >好评次数</td>
            <td >中评次数</td>
            <td >差评次数</td>
            <td >空余时间</td>
            <td >课程种类</td>
            <td >课时费</td>
            <td >操作</td>
        </tr>
        </thead>
        <tr class="tr-data" >
            <td v-text="coachinfo.realName"></td>
            <td v-text="coachinfo.phone"></td>
            <td v-text="coachinfo.allcount"></td>
            <td v-text="coachinfo.successcount	"></td>
            <td v-text="coachinfo.faultcount"></td>
            <td v-text="coachinfo.goodcomment"></td>
            <td v-text="coachinfo.middlecomment"></td>
            <td v-text="coachinfo.freetime	"></td>
            <td v-text="coachinfo.course"></td>
            <td v-text="coachinfo.charge"></td>
            <td v-text="coachinfo.attentiondesc"></td>
            <td ><a @click="">这是关注按钮</a></td>
            <td ><a  data-toggle='modal'  data-target='#myModal'  >联系私教</a></td>
            <td ><a @click="">这是留言按钮</a></td>
        </tr>

        </table>


        <!-- 模态框（Modal） -->
        <div   v-if="coachinfo!=null" class="modal fade " id="myModal"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog  modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            春天的风 带来夏天的雨
                        </h4>
                    </div>
                    <div class="modal-body">
                        该教练的课时费为{{coachinfo.charge}}.........are you sure now?
<!--                        <form  >-->

<!--                            <label>选择课余时间:</label>-->
<!--                            <select   v-model="coachTimeId"  name="coachTimeId">-->
<!--                                <option v-for="coachTime in freetime" :value="coachTime.coachTimeId">{{coachTime.coachtimedesc}}</option>-->
<!--                            </select>-->
<!--                        </form>-->
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" @click="chargesure" data-dismiss="modal">确认
                        </button>
                        <button type="button"   data-dismiss="modal"        class="btn btn-primary ">
                            取消
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>

    </div>



    <script type="text/javascript">
    //全局变量
        var _this;
    var zullstr="http://192.168.10.58:11000/user-coach/"
         var urlstring=window.location.href;
         var str=urlstring.split("?")[1];
         var studentstr=str.split("&")[0];
         var userId=studentstr.split("=")[1];
         var coachstr=str.split("&")[1];
         console.log(coachstr)
         var coachId=coachstr.split("=")[1];
         var app=new Vue({
            el:"#outter",
            data:{
                coachinfo:null,
                coachId:coachId,
                studentId:userId,
                coachTimeId:"",
                freetime:[]
            },
            created:function(){
                _this=this;
                this.selectcoachinfobyid();
               this. selectfreetime();
            },
            methods:{
                selectcoachinfobyid:function(){
                    $.ajax({ beforeSend: function (request) {
                            request.setRequestHeader("auth_token", $.cookie("auth_token"));},
                        url:zullstr+"orders/selectordercount",
                        type:"post",
                        data:{"studentId":userId,"coachId":coachId},
                        success:function(data){
                              _this.coachinfo=data;
                        }
                    });
                },

                selectfreetime:function(){
                    $.ajax({ beforeSend: function (request) {
                            request.setRequestHeader("auth_token", $.cookie("auth_token"));},
                        url:zullstr+"appoint/freetime",
                        type:"post",
                        data:{"coachId":coachId},
                        success:function(data){
                            _this.freetime=data;
                        }
                    });

                 },

                chargesure:function () {
                    $.ajax({ beforeSend: function (request) {
                            request.setRequestHeader("auth_token", $.cookie("auth_token"));},
                        url:zullstr+"appoint/confirmchage",
                        type:"post",
                        data:{"studentId":userId,"coachId":coachId},
                        success:function(data){
                            var result=data.data;
                            console.log(result)
                            if(result==2){
                                alert("拒绝 ")

                            }
                            if(result==1){
                                alert("确认")
                            }
                            if(result==3){
                                alert("没钱了")
                            }
                            if(result==0){
                                alert("请等待 ")
                            }

                        }
                    });
                }
            }
        });


    </script>

    </body>
    </html>